<template>
  <!--  发货订单-->
  <div class="full-box">
    <el-row class="row1">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a>订单管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>发货订单</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <el-row class="searchArea">
      <el-form label-width="150px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="订单编号">
              <el-input v-model="data.select.OrderId">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="客户名称">
              <el-input v-model="data.select.client">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="data.select.statusBack" placeholder="全部状态">
                <el-option v-for="status in data.select.status" :label="status.descs" :value="status.descs"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="">
              <el-button @click="selectBtn" type="success" style="width: 200px">
                <el-icon>
                  <Search/>
                </el-icon>&nbsp;&nbsp;搜索
              </el-button>
            </el-form-item>
          </el-col>

        </el-row>


      </el-form>
    </el-row>
    <el-row>
      <el-button-group>
        <el-button type="success" @click="insertNewOrder">
          <el-icon><CirclePlus /></el-icon>&nbsp;
          新增
        </el-button>
        <el-button type="primary" >
          <el-icon><Printer /></el-icon>&nbsp;
          打印
        </el-button>
        <el-button type="warning">
          <el-icon><Promotion /></el-icon>&nbsp;
          上传
        </el-button>
        <el-button type="danger">
          <el-icon><Download /></el-icon>&nbsp;
          下载
        </el-button>
      </el-button-group>
    </el-row>
    <el-row class="table">
      <el-table :data="data.clientList"

                class="list-form"
                border stripe>
        <el-table-column prop="orderId" label="订单编号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="client" label="客户名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="address" label="收货地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="consignee" label="联系人"></el-table-column>
        <el-table-column prop="consigneePhone" label="联系电话"></el-table-column>
        <el-table-column prop="status" label="配送状态" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button @click="btnShowProduct(scope.row)" type="success">
              <el-icon><ZoomIn /></el-icon>&nbsp;
              商品详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="width: 1220px; display: flex;justify-content: right">
        <el-pagination
            style="margin-top: 10px"
            v-model:current-page="data.clientPage.currentPage"
            @current-change="handleCurrentChangeClient"
            layout="prev, pager, next"
            :page-size="5"
            :total="data.clientPage.total"
        />
      </el-row>
    </el-row>


  </div>

  <!--商品详情-->
  <el-dialog v-model="data.detailList.show" title="商品详情" width="800">
    <el-table :data="data.detailList.list">
      <el-table-column type="index" label="序号" width="80px"></el-table-column>
      <el-table-column prop="nickName" label="通用名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="productName" label="商品名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="unit" label="包装规格"></el-table-column>
      <el-table-column prop="suppliers" label="生产厂家" show-overflow-tooltip></el-table-column>
      <el-table-column prop="classs" label="产品批号"></el-table-column>
      <!--      <el-table-column prop="type" label="剂型"></el-table-column>-->
      <!--      <el-table-column prop="price" label="价格"></el-table-column>-->
      <el-table-column prop="quantity" label="数量"></el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.detailList.show = false">取消</el-button>
        <el-button type="primary" @click="data.detailList.show = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--添加对话框-->
  <el-dialog v-model="data.orderDialog.show" title="添加新订单" style="width: 600px">
    <el-form label-width="120px">

      <el-form-item label="客户名">
        <el-input style="width: 240px" v-model="data.order.client"></el-input>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input style="width: 240px" v-model="data.order.consignee"></el-input>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input style="width: 240px" v-model="data.order.consigneePhone"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input style="width: 240px" v-model="data.order.address"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.orderDialog.show = false">取消</el-button>
        <el-button type="primary" @click="orderCertain">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script lang="ts" setup>
import {reactive, onMounted} from "vue";
import axios from "axios";
import moment from "moment/moment";
import router from "@/router";
import {ElMessage} from "element-plus";



const data = reactive({
  clientList: [],
  select: {
    status: [],
    statusBack: "",
    client: "",
    OrderId: ""
  },
  date: moment(new Date()).format(' YYYY-MM-DD HH:mm'),
  clientPage: {
    currentPage: 1,
    total: ""
  },
  detailList: {
    show: false,
    list: []
  },
  //测试
  orderDetails: {
    detailId: "",
    orderId: 4,
    productId: 3,
    quantity: 20
  },
  //订单添加数据
  order: {
    orderId: "",
    client: "",
    createTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss'),
    deliverTime: moment(new Date()).format(' YYYY-MM-DD HH:mm:ss'),
    consignee: "",
    consigneePhone: "",
    address: ""
  },
//  订单对话框
  orderDialog: {
    show: false
  }
})
//初始化
let initList = () => {

  //初始化clientList
  handleCurrentChangeClient();
  //初始化状态列表
  initStatus();
}


// 定义一个接口来表示订单详情的结构
interface OrderDetail {
  detailId: string;
  orderId: number;
  productId: number;
  quantity: number;
}

//添加新订单
let insertNewOrder = () => {
  data.orderDialog.show = true;
}
//成功消息
const successMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'success',
  });
}
//失败消息
const errorMessage = (message: any) => {
  ElMessage({
    showClose: true,
    message: message,
    type: 'error',
  });
}
let orderCertain = () => {
  axios({
    url: "http://localhost:8080/Order/createNewOrder",
    method: "post",
    params: data.order
  }).then((res) => {
    if (res.data.success) {
      successMessage("选择商品");
      sessionStorage.setItem("orderId", res.data.data.orderId);
      sessionStorage.setItem("creTime", res.data.data.createTime);
      setStatus(res.data.data.orderId);
      router.push("/order/addProduct");
    } else {
      errorMessage("创建失败")
    }
  })
  data.orderDialog.show = false;
}


let setStatus = (orderId: String) => {
  axios({
    url: "http://localhost:8080/deliverOrder/insert",
    method: "post",
    params: {
      orderId: orderId,
      statusId: 31
    }
  })
}


let initStatus = () => {
  axios({
    url: "http://localhost:8080/dict/selectStatus",
    method: "get",
    params: ""
  }).then((res) => {
    data.select.status = res.data.data;
    console.log(data.select.status);
  })
}

onMounted(() => {
  initList();
})
//client换页
const handleCurrentChangeClient = () => {
  if (data.select != null) {
    selectBtn();
  } else {
    axios({
      url: "http://localhost:8080/clientDeliver/selectAll",
      method: "get",
      params: {
        currentPage: data.clientPage.currentPage
      }
    }).then((res) => {
      data.clientList = res.data.data;
      data.clientPage.total = res.data.total;
    })
  }


}
//搜索
let selectBtn = () => {
  axios({
    url: "http://localhost:8080/clientDeliver/myQuery",
    method: "get",
    params: {
      currentPage: data.clientPage.currentPage,
      orderId: data.select.OrderId,
      client: data.select.client,
      status: data.select.statusBack,
      size: 5
    }
  }).then((res) => {
    data.clientList = res.data.data;
    data.clientPage.total = res.data.total;
  })
}
//详单显示
const btnShowProduct = (row: any) => {
  data.detailList.show = true;
  axios({
    url: "http://localhost:8080/loadingDetails/selectByOrderId",
    method: "get",
    params: {
      orderId: row.orderId
    }
  }).then((res) => {
    data.detailList.list = res.data.data;
  })
}

</script>

<style scoped>
.full-box {
  margin: 15px;
  width: 100%;
}

.table {
  width: 1250px;
  margin-top: 20px;
}

.searchArea {
  margin-top: 10px;
  margin-left: -20px;
  margin-bottom: 10px;
}

/*梁宏宇*/
.list-form {
  display: flex;
  justify-content: center;
  margin-right: 30px;
}

.row1 {
  margin-top: 25px;
  margin-bottom: 30px;
}
</style>